// 提供一个能够显示 xtx-message组件的函数
// 这个函数将来:导入直接使用，也可以挂载在vue实例原型上
// import Message from 'Message.js' 使用 Message({type:'error',text: '提示文字'})
// this.$message({type:'error',text:'提示文字'})
import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备dom容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
// 定时器标识
let timer = null

export default ({ type, text, time = 3000 }) => {
  // 渲染组件
  // 1．导入消息提示组件
  // 2．将消息提示编译为虚拟节点（dom节点）
  // createVNode（组件，属性对象）
  const vNode = createVNode(XtxMessage, { type, text })
  // 3. 准备一个装载消息提示组件的DOM容器
  // 4. 将虚拟节点渲染再容器中
  // render(虚拟节点,DOM容器)
  render(vNode, div)
  // 5.3s后销毁组件
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, time)
}
